<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 视口 宽度是设备的宽度，默认缩放1，最大缩放1，禁止用户两个手指缩放网页 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>私信-ylbNotesHub</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/mycss.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2080705_x7u3h1yrrfc.css">
</head>
<body>
<div th:replace="~{common/header::header(activeUrl='chat')}"></div>

<main role="main">
    <div class="container" style="padding-right: 0px">
        <div class="row">
            <div class="col-0 col-sm-1 col-md-1"></div>
            <div class="col-12 col-sm-11 col-md-10">
                <div class="my-3 bg-white rounded shadow-sm">
                    <div class="row chatcenter">
                        <div class="col-2 col-sm-2 col-md-4 chatleft">
                            <div class="title-box">
                                <div class="user-msg">
                                    <img id="useravatar" th:src="${session.loginUser.getAvatar()}" class="layui-nav-img">
                                    <span id="uname" th:text="${session.userInfo.getNickname()}" style="font-size: 14px"></span>
                                    <input id="uid" type="text" hidden="hidden" th:value="${session.loginUser.getUid()}">
                                </div>
                            </div>

                            <div id="loadd" style="background-color: #3d3d3d;">
                                <div style="text-align: center;overflow:hidden;width: 100%">正在拉取最近联系人...</div>
                            </div>

                            <input id="isuid" type="text" hidden="hidden" th:value="${receiveruid}">
                            <div class="u-list" id="ulist" th:fragment="ulist">
                                <div th:each="u:${ulist}" th:class="${receiveruid==u.getUid()?'msg-item active-msg-item':'msg-item'}" onclick="talk(this)">
                                    <input type="text" hidden="hidden" th:value="${u.getUid()}">
                                    <div class="msg-left">
                                        <span class="layui-badge tips" th:style="${u.getMsgcount()>0?'visibility:visible;':'visibility:hidden;'}" th:text="${u.getMsgcount()>99?'99+':u.getMsgcount()}"></span>
                                        <div class="header">
                                            <img th:src="${u.getAvatar()}" class="layui-nav-img">
                                        </div>

                                        <div class="msg-right">
                                            <p class="who-name">
                                                <span th:text="${u.getName()}" style="font-size: 14px"></span>
                                            </p>
                                            <p class="last-msg">
                                                <span th:text="${u.getLastmsg()}"></span>
                                            </p>
                                            <div class="msg-time" th:text="${#dates.format(u.getTime(),'MM-dd')}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-10 col-sm-10 col-md-8 chatright" id="chatshow" >
                            您还未选中或者发起聊天，快去跟好友聊一聊吧
                        </div>

                        <div class="col-10 col-sm-9 col-md-8 chatright" id="chatrelshow" style="display: none">
                            <header>
                                <span class="uname" style="font-size: 14px"></span>
                                <input class="chatuserid" type="text" hidden="hidden">
                            </header>
                            <div class="textcenter">
                                <!--消息接收区域-->
                                <div class="msg-box">
                                    <div id="msgarea" class="msg-content">
                                    </div>
                                </div>
                                <!--工具栏区域-->
                                <div class="chattool">
                                </div>
                                <!--发送区域-->
                                <div class="msg-send">
                                    <div class="textarea-box">
                                        <textarea id="messagetext" maxlength="500"></textarea>
                                    </div>
                                    <footer>
                                        <a class="btn" id="send" role="button" style="font-size: 14px">按enter键发送</a>
                                    </footer>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1"></div>
        </div>
    </div>
</main>

<script th:src="@{/js/jquery-3.5.1.min.js}"></script>
<script th:inline="javascript" th:src="@{/js/chat.js}"></script>
<script th:src="@{/js/toTop.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/swiper/swiper-3.4.2.jquery.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
</body>

</html>